<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Příklad 1</title>
		
		<script src="./framework-min.js"></script>
		
		<script>
			
			new sCanvas("canvas", function() {
				
				var line;
				
				this.rect(0, 0, this.width(), this.height())
				.attr("fill", null)
				.mousedown(function(e) {
					line = this.sc.line(e.canvasX, e.canvasY);
					this.mousemove(function(e) {
						line.addLine(e.canvasX, e.canvasY);
					});
				})
				.mouseup(function() {
					this.unbind("mousemove");
				});
				
			}, function() {
				alert("Při inicializaci canvasu došlo k chybě.");
			});
			
		</script>
		
		<style>
			
			#canvas{
				width: 400px;
				height: 300px;
				float: left;
			}
			
			#code{
				width: 550px;
				float: left;
				font-family: monospace;
				font-size: 14px;
				white-space: pre-wrap;
			}
			
			#link{
				position: absolute;
				top: 0;
				right: 0;
				color: #888;
				font-size: 10px;
				text-decoration: none;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="canvas">
			<canvas width="400" height="300"></canvas>
		</div>
		
		<div id="code">new sCanvas("canvas", function() {
    var line;

    this.rect(0, 0, this.width(), this.height())
    .attr("fill", null)
    .mousedown(function(e) {
        line = this.sc.line(e.canvasX, e.canvasY);
        this.mousemove(function(e) {
            line.addLine(e.canvasX, e.canvasY);
        });
    })
    .mouseup(function() {
        this.unbind("mousemove");
    });
}, function() {
    alert("Při inicializaci canvasu došlo k chybě.");
});
		</div>
		
		<a href="./example2.html" id="link">»</a>
		
	</body>
</html>
